import React from 'react';
import { Row, Col } from 'antd';
import { StateType } from '@/common-typings';
import { formatText } from './utils';
import './index.less';

const defaultSetting1 = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 8,
  xl: 6,
};

const defaultSetting2 = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 8,
  xl: 8,
};

export const Title = (props: StateType) => (
  <p className="st-list-title">{props.children || '--'}</p>
);

const renderValue = (text: any, item: StateType) => formatText(text, item);

class InfoList extends React.PureComponent<StateType> {
  render() {
    const { config, isFirstLayout = true } = this.props;
    const setting = isFirstLayout ? defaultSetting1 : defaultSetting2;
    return (
      <Row className="st-list-row" type="flex">
        {config.map((item: StateType) => {
          let values;
          if (item.render) {
            values = item.render(item.value);
          } else {
            values = renderValue(item.value || '', item);
          }

          return (
            <Col key={item.id || item.label} className="st-list-col" {...setting}>
              <span>{item.label}:</span>
              <span>{values}</span>
            </Col>
          );
        })}
      </Row>
    );
  }
}

export default InfoList;
